<template>
  <div style="background-color: lightcyan; height: 100vh">
    <my-title>
      用户注册
      <template v-slot:any>
        <router-link to="/login">登录</router-link>
        <router-link to="/">返回首页</router-link>
      </template>
    </my-title>

    <el-card class="box-card">
      <div class="card">
        <div class="formultion" style="position: relative">
          <h1 style="text-align: center; margin-bottom: 20px">注册</h1>
          <el-form
            style="position: relative"
            :label-position="labelPosition"
            label-width="80px"
            :model="formLabelAlign"
            ref="formLabelAlign"
            :rules="rules"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="formLabelAlign.username"
                auto-complete="off"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="formLabelAlign.password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmatPassword">
              <el-input
                type="password"
                v-model="formLabelAlign.confirmatPassword"
                placeholder="请输入确认密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input
                v-model="formLabelAlign.code"
                placeholder="请输入验证码"
                style="width: 50%; float: left"
              ></el-input>
            </el-form-item>
            <div
              class="codeImg"
              style="
                height: 40px;
                background-color: aqua;
                width: 100px;
                position: absolute;
                right: 30px;
                bottom: 0px;
              "
            >
              <verificationCode></verificationCode>
            </div>
          </el-form>
          <el-button type="primary" @click="submitForm('formLabelAlign')"
            >立即注册</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import MyTitle from "../components/MyTitle";
import verificationCode from "../components/verificationCode.vue";
export default {
  components: {
    MyTitle,
    verificationCode,
  },
  data() {
    // 确认密码校验
    var validateConfirmation = (rule, value, callback) => {
      if (value != this.formLabelAlign.password) {
        callback(new Error("两次输入密码不一致！"));
      } else {
        callback();
      }
    };
    // 验证码校验
    var validateVerificationCode = (rule, value, callback) => {
      value = value.toLowerCase();
      if (value != this.VerificationCode) {
        callback(new Error("验证码输入错误！"));
      } else {
        callback();
      }
    };
    return {
      labelPosition: "right", // 标签对齐方式
      VerificationCode: "", // 验证码字符串
      VerificationCodeUrl: "", // 验证码图片地址
      formLabelAlign: {
        username: "", // 用户名
        password: "", // 密码
        confirmatPassword: "", // 确认密码
        code: "", // 验证码
      },

      rules: {
        // 用户名验证规则
        username: [
          { required: true, message: "用户名不能为空" },
          { min: 6, max: 18, message: "长度必须在6-18位之间", trigger: "blur" },
        ],
        // 密码框校验规则
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // 确认密码校验规则
        confirmatPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validateConfirmation, trigger: "blur" },
        ],
        // 验证码校验规则
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { validator: validateVerificationCode, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: "注册成功！",
            type: "success",
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.formultion {
  width: 400px;
  margin: 30px auto;
  text-align: center;
}
.box-card {
  width: 500px;
  margin: 0 auto;
  margin-top: 150px;
}
</style>